<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-link text="一个链接"></pure-link>
			</pj-demo>

			<!-- 主题 -->
			<pj-demo title="主题">
				<pure-flex wrap>
					<pure-link
						text="主要链接"
						theme="primary"
					></pure-link>
					<pure-link
						text="成功链接"
						theme="success"
					></pure-link>
					<pure-link
						text="警告链接"
						theme="warning"
					></pure-link>
					<pure-link
						text="危险链接"
						theme="danger"
					></pure-link>
					<pure-link
						text="信息链接"
						theme="info"
					></pure-link>
					<pure-link
						text="自定义主题"
						theme="--my-link-1"
					></pure-link>
				</pure-flex>
			</pj-demo>

			<!-- 下划线 -->
			<pj-demo title="下划线">
				<pure-flex wrap>
					<pure-link
						text="查看详情"
						theme="primary"
						underline
					></pure-link>
				</pure-flex>
			</pj-demo>

			<!-- 图标 -->
			<pj-demo title="图标">
				<pure-flex wrap>
					<pure-link
						text="查看详情"
						theme="warning"
						beforeIconName="__arrow-left"
						afterIconName="__arrow-right"
					></pure-link>
				</pure-flex>
			</pj-demo>

			<!-- 禁用 -->
			<pj-demo title="禁用">
				<pure-flex wrap>
					<pure-link
						text="查看详情"
						theme="danger"
						beforeIconName="__arrow-left"
						afterIconName="__arrow-right"
						disabled
					></pure-link>
				</pure-flex>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup></script>

<style lang="scss" scoped>
	.page {
		--my-link-1: #06c662;
	}
</style>
